<template>
	<view class="encyclopedia_page">
		
		<puplic-nav titleTxt="百科" :flag="isFlag"  />
		
		<view class="re">
			<view class="search_area">
				<image src="@/static/images/icon_search.png" class="search_img"></image>
				<view class="">请输入您想要搜索的问题</view>
			</view>
			<image src="@/static/images/banner_02.png" class="wp100 vt" mode="widthFix"></image>
		</view>
		
		<view class="re pl24 pr24" style="margin-top: -190rpx;">
			
			<view class="area_block_en_1">
				<view class="flex_box aie">
					
					<view class="txt_hor_sty mr10">
						<view class="txt_1">查资料</view>
					</view>
					
					<view class="item ov"><view class="fs20 cor_666">SWITCH资料全了解</view></view>
					<view class="df aic">
						<view class="fs24 cor_666 mr10">更多评论</view>
						<image src="@/static/images/icon_arw_2.png" class="img_1"></image>
					</view>
				</view>
				
				<view class="pt10 df fw jcsb">
					<view class="mt32 df aic fldc " v-for="(item, index) in menuData" :key="item.id" style="width: calc(25% - 30rpx);">
						<image :src="item.src" class="img_2" ></image>
						<view class="mt10 fs24 fwb cor_333">{{item.name}}</view>
					</view>
				</view>
				
			</view>
			
			<view class="mt24 area_block_en_2">
				
				<view class="flex_box aie">
					
					<view class="txt_hor_sty mr10">
						<view class="txt_1">查答案</view>
					</view>
					
					<view class="item ov"><view class="fs20 cor_666">常见问题随手查</view></view>
					<view class="df aic">
						<view class="fs24 cor_666 mr10">更多评论</view>
						<image src="@/static/images/icon_arw_2.png" class="img_1"></image>
					</view>
				</view>
				
				<view class="pt10">
					<view class="mt28 flex_box aic" v-for="(item, index) in 4" :key="index">
						<image src="@/static/images/icon_huo.png" class="img_3 mr15"></image>
						<view class="item ov"><view class="clamp_1 fs24 cor_333">SWITCH各版本有什么区别?</view></view>
					</view>
				</view>
				
				<view class="submit_btn">提交</view>
				
			</view>
			
			<view class="mt24 area_block_en_2">
				
				<view class="flex_box aie">
					
					<view class="txt_hor_sty mr10">
						<view class="txt_1">其他知识</view>
						
						
					</view>
					
					<view class="item ov"><view class="fs20 cor_666"></view></view>
					
				</view>
				
				<view class="othe_knowledge_list">
					
					<view class="item_card item_card_1">
						<view class="txt_1">错误代码</view>
						<view class="txt_2">各区错误代码汇总</view>
					</view>
					
					<view class="item_card item_card_2">
						<view class="txt_1">发售日历</view>
						<view class="txt_2">新游戏上市早知道</view>
					</view>
					
				</view>
				
				
				
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import PuplicNav from '@/components/puplicNav/index.vue';
	
	const isFlag = ref(false); //控制自定义导航栏背景色
	
	const menuData = ref([
		{ id: 1, src: '/static/images/icon_en_1.png', name: '主机' },
		{ id: 2, src: '/static/images/icon_en_2.png', name: '账号' },
		{ id: 3, src: '/static/images/icon_en_3.png', name: '购买' },
		{ id: 4, src: '/static/images/icon_en_4.png', name: '会员' },
		{ id: 5, src: '/static/images/icon_en_5.png', name: '存档' },
		{ id: 6, src: '/static/images/icon_en_6.png', name: '配件' },
		{ id: 7, src: '/static/images/icon_en_7.png', name: '网络' },
		{ id: 8, src: '/static/images/icon_en_8.png', name: '其他' }
	]);
	
	onPageScroll((e) => {
		if(e.scrollTop >= 80) {
			isFlag.value = true;
		}else {
			isFlag.value = false;
		}
	});

</script>

<style lang="scss" scoped>
	
	page { background: #f5f5f5; }
	
	.encyclopedia_page {
		position: relative;
		background: #f5f5f5;
		.search_area {
			position: absolute;
			left: 24rpx;
			right: 24rpx;
			bottom: 218rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			height: 84rpx;
			font-size: 24rpx;
			color: #333;
			background: rgba(255, 255, 255, .8);
			border: 1px solid rgba(240, 170, 181, 0.2);
			border-radius: 16rpx;
			.search_img {
				position: relative;
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
		}
		.area_block_en_1 {
			position: relative;
			padding: 32rpx 44rpx;
			background: linear-gradient(180deg, rgba(255, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 70.99%);
			border-radius: 20rpx;
		}
		
		.area_block_en_2 {
			position: relative;
			padding: 32rpx 30rpx 40rpx;
			background: linear-gradient(180deg, #FFEEEE 0%, #FFFFFF 70.99%);
			border-radius: 28rpx;
		}
		.submit_btn {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			height: 88rpx;
			border-radius: 16rpx;
			background: #F5220F;
			margin-top: 60rpx;
		}
		.othe_knowledge_list {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			.item_card {
				position: relative;
				width: 288rpx;
				height: 160rpx;
				padding: 32rpx 20rpx 0;
				overflow: hidden;
				&.item_card_1 {
					background: url(@/static/images/icon_card_1.png) no-repeat;
					background-size: 288rpx 160rpx;
				}
				&.item_card_2 {
					background: url(@/static/images/icon_card_1.png) no-repeat;
					background-size: 288rpx 160rpx;
				}
				.txt_1 {
					font-size: 32rpx;
					line-height: 44rpx;
					font-weight: bold;
					color: #333;
				}
				.txt_2 {
					position: relative;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}
		}
	}

</style>
